<template>
  <div class="modify-dialog">
    <slot> </slot>
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
      <div class="page-wrap" style="height: 65vh">
        <Table
          :pagination="false"
          v-bind="tableOpts"
          defaultExpandAll
          v-on="tableEvent"
        >
        </Table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import modifyMixins from "@/mixins/modifyMixins.vue";
import tableMixins from "@/mixins/tableMixins.vue";

export default {
  name: "SaleMaterials",
  mixins: [tableMixins, modifyMixins],
  data() {
    return {
      apiName: "saleSaleMaterials",
      dialogWidth: "80vw",
      originData: [],
      form: {
        id: {
          tag: "el-input",
          label: "订单编号",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入订单编号",
          },
        },
      },
    };
  },
  computed: {
    title() {
      return "材料详情";
    },
  },
  mounted() {},
  methods: {
    showDialog(modify = "add", row = {}) {
      this.dialogVisible = true;
      this.row = row;
      this.fetchCurrentTable();
    },
    formatData(res) {
      this.total = res?.count || res?.total || 0;
      let data = res?.rows || res?.data || res || [];
      this.originData = data;
      data = data.reduce((pre, cur, i) => {
        return [
          ...pre,
          { materialId: `第${i + 1}批`, index: i, header: true },
          ...cur,
        ];
      }, []);
      this.dataSource = data.map((e) => {
        if (e.updatedAt)
          e.updatedTime = dayjs(e.updatedAt).format("YYYY-MM-DD HH:mm:ss");
        if (e.createdAt) {
          e.createdTime = dayjs(e.createdAt).format("YYYY-MM-DD HH:mm:ss");
        }
        return e;
      });
    },
    formatQuery(opts) {
      const { date = [], ...params } = opts;
      if (date && date[0] && date[1]) {
        params.startTime = dayjs(date[0]).format("YYYY-MM-DD HH:mm:ss");
        params.endTime = dayjs(date[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      params.saleId = this.row.saleId;
      return params;
    },
    handleAction(opts, cellRow) {
      const { row } = this;
      const { index = 0 } = cellRow;
      const {
        orderName: name,
        saleId,
        warehouseName,
        storeName,
        storeContacts,
        storeAddress,
        createdTime,
        warehouseContacts,
      } = row;
      if (opts == "downloadMaterials") {
        let prds = this.originData[index];
        let totalPrice = 0;
        try {
          prds = prds.map((e, i) => {
            const total = this.$acc.mul(e.salePrice, e.count);
            totalPrice = this.$acc.add(total, totalPrice);
            return [
              i + 1,
              e.materialName,
              e.norm,
              e.color,
              e.count,
              e.unit,
              e.salePrice,
              total,
            ];
          });
          this.$quinn.downloadSale({
            excelName: `${storeName + saleId}`,
            出仓仓库: warehouseName,
            日期: createdTime,
            门店名称: storeName,
            门店位置: storeAddress,
            门店联系人: storeContacts,
            仓库联系人: warehouseContacts,
            合计: totalPrice,
            list: [...prds, ["合计：", totalPrice]],
          });
        } catch (err) {
          // console.log(err);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-table__expanded-cell) {
  padding: 0;
}
</style>
